<template>
  <div class="code-editor">
    <div class="row">
      <div class="row-color">
        <label :for="labelGenerator('color')">选择一个颜色:</label>
        <input
          type="color"
          :name="labelGenerator('color')"
          placeholder="#ffffff"
          :id="labelGenerator('color')"
          v-model="item.color"
          @input="emit('update')"
        />
        <label :for="labelGenerator('colorInput')" style="padding-left: 10px">或</label>
        <input
          type="text"
          placeholder="#FFFFFF"
          v-model="item.color"
          :name="labelGenerator('colorInput')"
          :id="labelGenerator('colorInput')"
          @input="emit('update')"
        />
      </div>
      <div class="row-opacity">
        <label :for="labelGenerator('opacity')" class="padding-left-10px">不透明度</label>
        <div class="bg-grid">
          <input
            v-model="item.opacity"
            type="range"
            placeholder="透明度"
            :style="{ '--textColor': background }"
            :data-value="item.opacity + '%'"
            :name="labelGenerator('opacity')"
            :id="labelGenerator('opacity')"
            @input="emit('update')"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
const props: any = defineProps({
  value: Object,
  index: Number
})
const emit = defineEmits(['update'])
const labelGenerator = (label: string) => label + '-' + (props.index + 1)
const item = ref<any>(props.value)
// computed
const background = computed(() => {
  return `linear-gradient(to right, transparent, ${item.value.color}`
})
watch(props, (newProps) => {
  item.value = newProps.value
})
</script>

<style lang="scss" scoped>
input[type='text'] {
  color: #001f3f;
  padding: 0 5px;
  font-size: 15px;
  font-weight: 700;
  width: 85px;
  display: inline-block;
}

input[type='color'],
input[type='text'] {
  border: 3px solid #001f3f;
  border: 3px solid var(--textColor);
  height: 32px;
}

input[type='color'] {
  -webkit-appearance: none;
  cursor: pointer;
  width: 32px;
  padding: 0;
}

input[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type='color']::-webkit-color-swatch {
  border: none;
}
.code-editor {
  .bg-grid {
    display: flex;
    flex: 1;
    align-items: center;
    background: linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.4) 25%,
        transparent 25%,
        transparent 75%,
        rgba(0, 0, 0, 0.4) 75%,
        rgba(0, 0, 0, 0.4)
      ),
      linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.4) 25%,
        transparent 25%,
        transparent 75%,
        rgba(0, 0, 0, 0.4) 75%,
        rgba(0, 0, 0, 0.4)
      );
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
  }
  .row {
    display: flex;
    align-items: center;
    font-weight: 700;
    color: #001f3f;
    color: var(--textColor);
    margin-bottom: 20px;
    margin-top: 0;
    label {
      padding-right: 10px;
    }

    &-color,
    &-opacity {
      display: flex;
      align-items: center;
    }

    &-opacity {
      flex: 1;
    }
  }

  @media screen and (max-width: 600px) {
    .row {
      display: block;

      .padding-left-10px {
        padding-left: 0;
      }

      &-color {
        margin-bottom: 16px;
      }
    }
  }
}
</style>
